<template>
  <div class="home">
    <h3 style="padding: 10px 0 5px 0">文章</h3>
    <!-- <el-divider></el-divider> -->
    <el-row>
      <el-col>
        <div class="articles">

          <article-card v-for="item in ArticleList" :key="item.id" 
            :imgUrl="`${imgUrl}`"
            :img="item.img"
            @click="to(item)"
          >
            <template slot="title">{{item.title}}</template>
            <template slot="body">
              <div v-html="item?.content?.substring(0, 100)"></div>
            </template>
            <template slot="footer">
              <i class="el-icon el-icon-date" style="padding: 0 5px" title="修改/更新时间" >
                <time class="time">{{
                  item.updateTime | dateFormat
                }}</time>
              </i>
              <el-divider direction="vertical"></el-divider>
              <i class="el-icon el-icon-reading" style="padding: 0 5px" title="访问量" >{{item.count}}</i>
              <el-tag size="small" class="category-tag" title="分类">{{ item.categoryName }}</el-tag>
            </template>
          </article-card>
        </div>
      </el-col>
    </el-row>
    <no-data v-show="ArticleList.length === 0 && queryInfo.query !== ''"
      :message="'没有数据'"
    />
  </div>
</template>

<script>
import ArticleCard from '@/components/front/ArticleCard.vue'
import NoData from '@/components/NoData.vue'
export default {
  components: {
    NoData,
    ArticleCard
  },
  props: {
    query: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 文章列表
      ArticleList: [],
      // 轮播图
      carouselList: [],
      // 查询文章的条件
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      maxPageSize: 1,
      imgUrl: '/api/download',
      scrollTop: 0,
    };
  },
  methods: {
    GetArticleList() {
      console.log('loading');
      this.$http.get("/front/article", { params: this.queryInfo }).then((res) => {
        if (!res.data.status) {
          return this.$message.error("获取文章失败！");
        }
        const data = res.data.data;

        this.ArticleList.push(...data.records) ;
        this.maxPageSize = Math.ceil(data.total / this.queryInfo.pagesize)
      });
    },
    to(item) {
      console.log(item.id);
      this.$router.push({
        path: `/articleDetail/${item.id}`,
        title: item.title
      });
    },

    handleScroll (e) {
      if (e.target !== document)
        return
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement.scrollingElement || e.target.scrollingElement
      if (Math.ceil(scrollTop) + Math.ceil(clientHeight) >= scrollHeight) {
        if (this.queryInfo.pagenum < this.maxPageSize) {
          this.queryInfo.pagenum ++
          this.GetArticleList()
        }
      }
    },
  },
  created() {
    this.ArticleList = []
    this.queryInfo.query = this.query
    this.GetArticleList()
    
  },
  mounted() {
    this.$scrollListener(window, this.handleScroll)
    document.title = '首页-个人博客'
    console.log(this.query);
  },
  watch: {
    query(val) {
      this.queryInfo.query = val
      this.ArticleList = []
      this.queryInfo.pagenum = 1
      this.GetArticleList()
    }
  },
  beforeDestroy () {
    this.$removeScrollListener(window, this.handleScroll)
  },

};


</script>

<style lang="less" scoped>
.home {
  margin: 0px 5px;
}

.card {
  min-height: 180px;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  // width: 100%;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    box-shadow:  0 2px 6px 0 rgb(0 0 0 / 10%);
  }
  &:hover {
    color: #006d87;
    text-decoration: underline;
  }
  .card-left {
    width: 75%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    flex: 5;
    position: relative;
    
    .card-title {
      font-size: 1.25rem;
      font-weight: bold;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .card-body {
      width: 100%;
      height: 60%;
      margin: 5px;
      color: #201f1e;
    }
    .card-footer {
      position: absolute;
      bottom: 10px;
      color: #57606f;
      width: 100%;
      .category-tag {
        position: absolute;
        right: 10px;
      }
      .el-icon:before {
        padding-right: 5px;
      }
    }
    
  }
  .card-right {
    width: 25%;
    flex: 2;
    display: flex;
    align-items: center;
    .image {
      width: 100%;
      // height: 100%;
    }
  }
}
</style>
